<template>
  <div class="pages">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-sticky>
        <Header>
          <div slot="left" class="left_fl">{{ userInfo.nameMask || '' }}</div>
          <div slot="right" class="right" @click="performanceSubsidiary()">
            <img src="../../../static/images/icon-date-yjmx.png" alt="">
            <div class="tettrer">业绩明细</div>
          </div>
        </Header>
      </van-sticky>
      <div class="inttopset"></div>

      <div class="iboixusb">
        <div class="iyejisd">
          <div class="headers">
            <div class="activeus" v-for="(item,index) in listbens" :key="index" @click="activetypes(index)">
              <div :class="activestar === index ? 'titlexet' :''">{{ item.title }}</div>
              <div :class="activestar === index ? 'xian' :''"></div>
            </div>
          </div>
          <div class="datatoday">
            <div class="topbaerker">
              <div class="shopingto">
                <div class="nameshop">商户总数</div>
                <div class="number">{{ stats.totalMerchant || 0 }}</div>
              </div>
              <div class="shopingto">
                <div class="nameshop">交易额(元)</div>
                <div class="number">{{ stats.totalAmount || 0 }}</div>
              </div>
              <div class="shopingto">
                <div class="nameshop">交易笔数</div>
                <div class="number">{{ stats.totalCount || 0 }}</div>
              </div>
            </div>
            <div class="topbaerker">
              <div class="shopingto">
                <div class="nameshop">活跃商户</div>
                <div class="number">{{ stats.activeMerchantNumber || 0 }}</div>
              </div>
              <div class="shopingto">
                <div class="nameshop">商户平均交易额</div>
                <div class="number">{{ ((stats.totalAmount || 0) / (stats.totalMerchant || 1)).toFixed(2) }}</div>
              </div>
              <div class="shopingto">
                <div class="nameshop">商户平均笔数</div>
                <div class="number">{{ ((stats.totalCount || 0) / (stats.totalMerchant || 1)).toFixed(2) }}</div>
              </div>
            </div>
            <div class="topbaerker">
              <div class="shopingto">
                <div class="nameshop">新增商户</div>
                <div class="number">{{ stats.newMerchant || 0 }}</div>
              </div>
              <div class="shopingto">
                <div class="nameshop">笔均单价(元)</div>
                <div class="number">{{ stats.avgAmount || 0 }}</div>
              </div>
              <div class="shopingto" @click="LossAnalysis()">
                <div class="nameshop">疑似流失商户</div>
                <div class="number underline">0</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 本月交易金额分时走势 -->
        <!--        <div class="tendency">本月交易金额分时走势</div>-->
        <!--        <div class="tendencyDetail">-->
        <!--          <div class="tendency_header">-->
        <!--            <div class="poercks" v-for="(item,index) in tendencylist" :key="index" @click="tendency_hea(index)">-->
        <!--              <div :class="tendencyactive === index ? 'usertext':''">{{ item }}</div>-->
        <!--              <div :class="tendencyactive === index ? 'xianser':''"></div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--          <div class="ibodyeterbox">-->
        <!--            <div id="chartLineBox" style="width: 100%;height: 30vh;"></div>-->
        <!--          </div>-->
        <!--        </div>-->

        <!-- 业绩详情 -->
        <div class="tendency">业绩详情</div>

        <!-- 选项卡切换 -->
        <div class="xuanxiangja">
          <div class="xuanxiang_header">
            <div class="iboxclick" @click="activerset(index)" :class="listactive === index ? 'activeser' : ''" v-for="(item,index) in list" :key="index">
              <div class="name_set">{{ item.title }}</div>
              <div :class="listactive === index ? 'xian' : ''"></div>
            </div>
          </div>

          <div class="timnerinsertb">
            <div class="flleft">
              <div class="usenber" v-for="(item, index) in bbaclass" :key="index" :class="adusser === index ? 'abeuusbf' :'' " @click="intebba(index)">
                {{ item.title }}
              </div>
            </div>
            <div class="frright" @click="ishouwdesi()">
              <div class="titlester">筛选指标</div>
              <img src="../../../static/images/icon-date-sxzb.png" alt="">
            </div>
          </div>

          <div class="designation">
            <div class="intebs">{{ list[listactive].columnTitle }}</div>
            <div class="intebsf" @click="injiaoyi()">
              <div class="nameubfs">交易金额</div>
              <img v-if="manny === 0" src="../../../static/images/iocn-sort-down.png" alt="">
              <img v-if="manny === 1" src="../../../static/images/iocn-sort-up.png" alt="">
            </div>
            <div class="intebsf" @click="frequency()">
              <div class="nameubfs">交易笔数</div>
              <img v-if="frequencytow === 0" src="../../../static/images/iocn-sort-down.png" alt="">
              <img v-if="frequencytow === 1" src="../../../static/images/iocn-sort-up.png" alt="">
            </div>
            <div class="intebsf" @click="wholesale()">
              <div class="nameubfs">大额笔数</div>
              <img v-if="wholesaletress === 0" src="../../../static/images/iocn-sort-down.png" alt="">
              <img v-if="wholesaletress === 1" src="../../../static/images/iocn-sort-up.png" alt="">
            </div>
          </div>

          <div class="designationsin" v-for="(item, index) in statsSub" :key="index">
            <div class="intebs">{{ item.name || '' }}</div>
            <div class="intebsf">
              <div class="nameubfsfv">{{ item.totalAmount || 0 }}</div>
            </div>
            <div class="intebsf">
              <div class="nameubfsfv">{{ item.totalCount || 0 }}</div>
            </div>
            <div class="intebsf">
              <div class="nameubfsfv">{{ item.overTotalCount || 0 }}</div>
            </div>
          </div>

        </div>

      </div>

      <van-action-sheet v-model="showbeautiful" title="筛选条件">
        <div class="content">
          <div class="contentList">
            <div class="icuebfs" :class="{subeberoff:item.bOn}" v-for="(item,index) in icuebfs" :key="index" @click="checkbox(index)">
              <div class="intebsclass">{{ item.titles }}</div>
              <img v-show="item.bOn == true" src="../../../static/images/setyrbu.png" alt="">
            </div>
          </div>
          <div class="isok">确定</div>
        </div>
      </van-action-sheet>


    </van-pull-refresh>
    <!-- 底部 -->
    <van-tabbar v-model="active" active-color="#3288FF" inactive-color="#4F4F4F">
      <van-tabbar-item icon="setting-o" replace to="/index">
        <span>首页</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.active : icon.normal"/>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/information">
        <span>数据</span>
        <img slot="icon" slot-scope="props" :src="props.active ? search.actives : search.normals"/>
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o" replace to="/my">
        <span>我的</span>
        <img slot="icon" slot-scope="props" :src="props.active ? user.actives : user.normals"/>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import echarts from 'echarts'
import { Toast } from 'vant'
import '../../../static/css/information.css'
import Header from '../../components/Header'
import { SessionKey } from '../../constant/SessionKey'
import { query, querySub } from '../../api/stats'

export default {
  components: { Header },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
  },
  data() {
    let userInfo = {}
    let list = []
    try {
      userInfo = JSON.parse(sessionStorage.getItem(SessionKey.user)) || {}
      if (userInfo.ownerType === 'AGENCY') {
        list = [{
          title: '团队',
          columnTitle: '团队名称',
          ownerType: 'AGENCY_TEAM'
        }, {
          title: '业务经理',
          columnTitle: '业务经理',
          ownerType: 'AGENCY_TEAM_MEMBER'
        }, {
          title: '直属商户',
          columnTitle: '商户名称',
          ownerType: 'MERCHANT'
        }]
      } else if (userInfo.ownerType === 'AGENCY_TEAM') {
        list = [{
          title: '业务经理',
          columnTitle: '业务经理',
          ownerType: 'AGENCY_TEAM_MEMBER'
        }, {
          title: '直属商户',
          columnTitle: '商户名称',
          ownerType: 'MERCHANT'
        }]
      } else if (userInfo.ownerType === 'AGENCY_TEAM_MEMBER') {
        list = [{
          title: '直属商户',
          columnTitle: '商户名称',
          ownerType: 'MERCHANT'
        }]
      }
    } catch (e) {
      console.warn('从session中获取用户信息失败')
    }

    return {
      userInfo,
      // 下拉刷新
      isLoading: false,

      showbeautiful: false,
      //首页
      icon: {
        normal: require('../../../static/images/icon-home-def.png'),
        active: require('../../../static/images/icon-home-sel.png')
      },
      //数据
      search: {
        normals: require('../../../static/images/icon-date-def.png'),
        actives: require('../../../static/images/icon-date-sel.png')
      },
      //我的
      user: {
        normals: require('../../../static/images/icon-user-def.png'),
        actives: require('../../../static/images/icon-user-sel.png')
      },
      show: false,
      active: 1,

      listbens: [{
        title: '昨日',
        timeType: 'YESTERDAY'
      }, {
        title: '本周',
        timeType: 'THIS_WEEK'
      }, {
        title: '本月',
        timeType: 'THIS_MONTH'
      }],
      activestar: 0,
      stats: {},

      tendencylist: ['交易金额', '交易笔数', '活跃商户', '新增商户'],
      tendencyactive: 0,


      // 交易金额
      manny: 0,
      // 交易笔数
      frequencytow: 0,
      // 大额笔数
      wholesaletress: 0,

      list,
      listactive: 0,
      statsSub: [],

      bbaclass: [{
        title: '昨日',
        timeType: 'YESTERDAY'
      }, {
        title: '本周',
        timeType: 'THIS_WEEK'
      }, {
        title: '本月',
        timeType: 'THIS_MONTH'
      }, {
        title: '上月',
        timeType: 'LAST_MONTH'
      }],
      adusser: 0,

      icuebfs: [
        { titles: '交易金额', bOn: false }, { titles: '交易笔数', bOn: false }, { titles: '大额笔数', bOn: false }, { titles: '笔单价', bOn: false }, { titles: '新增商户', bOn: false },
        { titles: '商户数', bOn: false }, { titles: '新增终端', bOn: false },
        { titles: '终端数', bOn: false }, { titles: '日均活跃商户', bOn: false }, { titles: '日均交易金额日均交易金额', bOn: false }, { titles: '日均交易笔数', bOn: false }
      ]
    }
  },
  created() {
    document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.edsdcharts()
    // })
    this.queryStats()
    this.queryStatsSub()
  },
  methods: {
    async queryStats() {
      this.stats = {}
      this.stats = await query({ timeType: this.listbens[this.activestar].timeType })
    },
    async queryStatsSub() {
      this.statsSub = []
      this.statsSub = await querySub({ timeType: this.bbaclass[this.adusser].timeType, statisticsType: this.list[this.listactive].ownerType })
    },
    edsdcharts() {
      var myChart = echarts.init(document.getElementById('chartLineBox'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: ''
        },
        color: [
          '#FECA67', '#3288FF'
        ],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['最高月', '本月'],
          left: '0%',
          textStyle: {
            fontSize: 16,
            color: '#A3A3A3'
          }
        },
        grid: {
          left: '0%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          splitNumber: 20,
          textStyle: {
            fontSize: 10,
            color: '#A3A3A3'
          },
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16'],
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 20
          }
        },
        yAxis: {
          type: 'value',
          max: 6,
          min: 1,
          interval: 1,
          textStyle: {
            fontSize: 11,
            color: '#A3A3A3'
          }
        },

        series: [
          {
            name: '最高月',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [1, 3, 3, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1]
          },
          {
            name: '本月',
            type: 'line',
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [1, 2, 3, 1, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1]
          }
        ]
      })
    },
    // 跳转业绩明细
    performanceSubsidiary() {
      // this.$router.push({ name: 'performanceSubsidiary' })
      Toast('敬请期待')
    },
    // 流失分析
    LossAnalysis() {
      this.$router.push({ name: 'LossAnalysis' })
    },
    activetypes(index) {
      this.activestar = index
      this.queryStats()
    },
    // 本月交易金额分时走势
    tendency_hea(index) {
      this.tendencyactive = index
    },
    // 交易金额
    injiaoyi() {
      if (this.manny === 0) {
        this.manny = 1
      } else {
        this.manny = 0
      }
    },
    // 交易笔数
    frequency() {
      if (this.frequencytow === 0) {
        this.frequencytow = 1
      } else {
        this.frequencytow = 0
      }
    },
    // 大额笔数
    wholesale() {
      if (this.wholesaletress === 0) {
        this.wholesaletress = 1
      } else {
        this.wholesaletress = 0
      }
    },
    activerset(index) {
      this.listactive = index
      this.queryStatsSub()
    },

    intebba(index) {
      this.adusser = index
      this.queryStatsSub()
    },
    ishouwdesi() {
      this.showbeautiful = true
    },
    // 多选
    checkbox(i) {
      console.log(this.icuebfs)
      this.icuebfs[i].bOn = !this.icuebfs[i].bOn
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 1000)
    }
  }
}
</script>

<style scoped>
page {
  background: rgb(245, 245, 245);
}

.pages {
  width: 100%;
}

.inttopset {
  width: 100%;
  height: 72px;
  background: #3288FF;
  position: absolute;
  top: 44px;
  z-index: -1;
}

.iboixusb {
  width: 100%;
  z-index: 99;
  padding: 0 16px;
  box-sizing: border-box;
}

.iyejisd {
  width: 100%;
  border-radius: 4px;
  background: #FFFFFF;
}

.headers {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  border-bottom: 1px solid #F2F2F2;
  display: flex;
  align-items: center;
}

.activeus {
  width: 56px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 16px;
  letter-spacing: 0px;
  margin-right: 27.5px;
}

.tettrer {
  color: #FFFFFF;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 17px;
  letter-spacing: 0px;
  margin-left: 8px;
}

.titlexet {
  color: #333333;
  font-family: OPPOSans;
  font-weight: medium;
  font-size: 16px;
  letter-spacing: 0px;
}

.xian {
  width: 56px;
  height: 4px;
  background: #3288FF;
  position: absolute;
  bottom: 0;
}

.datatoday {
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.topbaerker {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.topbaerker:nth-child(3) {
  margin-bottom: 0;
}

.shopingto {
  width: 33.33%;
}

.shopingto:nth-child(1) {
  width: 30.33%;
  /* background-color: coral; */
}

.shopingto:nth-child(2) {
  width: 36.33%;
  /* background-color: cyan; */
}

.shopingto:nth-child(3) {
  width: 30.33%;
  /* background-color: darkgreen; */
}

.nameshop {
  color: #828282;
  font-family: OPPOSans;
  font-weight: regular;
  font-size: 14px;
  letter-spacing: 0px;
}

.number {
  color: #333333;
  font-family: DIN;
  font-weight: regular;
  font-size: 18px;
  letter-spacing: 0px;
  margin-top: 8px;
}

.underline {
  text-decoration: underline;
  color: #EB5757;
}

</style>
